<template>
  <div class="number-select" v-if="!getIsPhone">
    <ab-options 
      :options="options" 
      :activeSwitchIndex="activeSwitchIndex"
      @click="updateIndex"
      :showIntegrate="showIntegrate"
      @on-msg="updateOptionsState"
    ></ab-options>
    <fastchoose-buttons-shengxiao v-show="showFastChooseButtons"></fastchoose-buttons-shengxiao>
    <play-instruction 
      :instruction="instruction"
      >
    </play-instruction>
    <div class="number-select-area" v-if="!showIntegrate">
      <lottery-box-shengxiao-pc
        v-show="!showIntegrate"
        :item="getCurrentLotteryState[0]"
        @click="handleUpdateData"
        class="select-row-adjust-first"
        :activeSwitchIndex="activeSwitchIndex"
      ></lottery-box-shengxiao-pc>
    </div>
    <lottery-box-sebo-phone
      v-show="showIntegrate"
      v-for="item in getCurrentLotteryState.slice(1)"
      :item="item"
      :key="item.id"
      @click="handleUpdateData"
      class="select-row-adjust"
      :activeSwitchIndex="activeSwitchIndex"
    ></lottery-box-sebo-phone>
  </div>
  <div v-else class="number-select-phone">
    <ab-options 
      ref='ab'
      :options="options" 
      :activeSwitchIndex="activeSwitchIndex"
      @click="updateIndex"
      @on-msg="updateOptionsState"
    ></ab-options>
     <lottery-box-shengxiao-phone
      v-show="!showIntegrate"
      :item="getCurrentLotteryState[0]"
      @click="handleUpdateData"
      class="select-row-adjust-first"
      :activeSwitchIndex="activeSwitchIndex"
    ></lottery-box-shengxiao-phone>
    <lottery-box-sebo-phone
      v-show="showIntegrate"
      v-for="item in getCurrentLotteryState.slice(1)"
      :item="item"
      :key="item.id"
      @click="handleUpdateData"
      class="select-row-adjust"
      :activeSwitchIndex="activeSwitchIndex"
    ></lottery-box-sebo-phone>
    <fastchoose-buttons-shengxiao-phone
      ref="fastchoose" 
      v-show="showFastChooseButtons"
      @click="closeFastChoosePanel"
      class="fastchoose-adjust"
    >
    </fastchoose-buttons-shengxiao-phone>
  </div>
</template>

<script>
import PlayInstruction from '@/components/play-instruction/play-instruction'
import AbOptions from '@/components/ab-options/ab-options'
import LotteryBoxSeboPhone from '@/components/lottery-type/common/lottery-box-sebo-phone'
import LotteryBoxShengxiaoPhone from '@/components/lottery-type/common/lottery-box-shengxiao-phone'
import LotteryBoxShengxiaoPc from '@/components/lottery-type/common/lottery-box-shengxiao-pc'
import FastchooseButtonsShengxiao from '@/components/base/fastchoose-buttons/fastchoose-buttons-shengxiao'
import FastchooseButtonsShengxiaoPhone from '@/components/base/fastchoose-buttons/fastchoose-buttons-shengxiao-phone'
import { boxWithCleanerMixin } from '@/assets/js/mixin.js'

import { mapMutations } from 'vuex'
export default {
  mixins: [boxWithCleanerMixin],
  components: {
    PlayInstruction,
    AbOptions,
    LotteryBoxSeboPhone,
    LotteryBoxShengxiaoPhone,
    LotteryBoxShengxiaoPc,
    FastchooseButtonsShengxiao,
    FastchooseButtonsShengxiaoPhone
  },
  data() {
    return {
      instruction: '当期开出的最后一位号码为特码',
      // 快速选号（整合/快捷选号）
      options: [
        {
          id: 'integrate',
          name: '整合',
          disabled: false
        },
        {
          id: 'fastchoose',
          name: '快捷选号',
          disabled: false
        }
      ],
       // 快速选择
      showButtons: false,
      // 默认a面
      activeSwitchIndex: 0,
      // 是否显示整合 
      showIntegrate: false,
      // 选中彩票信息 ,
      showFastChooseButtons: false
    }
  },
  created() {
    this.selectedLottery = []
  },
  methods: {
    updateOptionsState(item) {
      if (item.id == 'integrate') {
        if (item.active) {
          this.showIntegrate = true
          this.options.forEach(option => {
            if (option.id == 'fastchoose') {
              option.disabled = true
            }
          })
        } else {
          this.showIntegrate = false
          this.options.forEach(option => {
            if (option.id == 'fastchoose') {
              option.disabled = false
            }
          })
        }
      } else {
        if (item.active) {
          this.showFastChooseButtons = true
          this.options.forEach(option => {
            if (option.id == 'integrate') {
              option.disabled = true
            }
          })
        } else {
          this.showFastChooseButtons = false
          this.options.forEach(option => {
            if (option.id == 'integrate') {
              option.disabled = false
            }
          })
        }
      }
    },
    // ab面高亮
    updateIndex(index) {
      this.activeSwitchIndex = index
    },
    closeFastChoosePanel() {
      this.$refs.ab.$children.forEach((item, index) => {
        if (index > 0) {
          item.selected = false
        }
      })
      this.options.forEach(item => {
        if(item.id == 'integrate') {
          item.disabled = false
        }
      })
      this.showFastChooseButtons = false
    },
    
   
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
@media screen and (min-width 750px)
  .select-row-adjust >>> .select-row 
    justify-content space-between
    .sebo-box 
      width calc((100% - 50px) / 6) !important
      &.active 
        border 1px solid $color-ball-red 
        background rgba($color-ball-red, 0.102)
        box-sizing border-box
        .box-bottom 
          color $color-ball-red
      .box-top 
        .context 
          background $color-ball-red
@media screen and (max-width 750px)
  .select-row-adjust-first 
    margin-top 10px
  .select-row-adjust-first >>> .select-row 
    justify-content space-between
    .lottory-with-icon 
      width calc((100% - 10px) / 2) !important
      &.active 
        border 1px solid $color-ball-red 
        background rgba($color-ball-red, 0.102)
        box-sizing border-box
        .box-bottom 
          color $color-ball-red
        .box-top 
          color $color-ball-red 
          .iconfont 
            -webkit-text-fill-color $color-ball-red !important
            background-image none

  .select-row-adjust >>> .select-row 
    justify-content space-between
    .sebo-box 
      width calc((100% - 10px) / 2) !important
      &.active 
        border 1px solid $color-ball-red 
        background rgba($color-ball-red, 0.102)
        box-sizing border-box
        .box-bottom 
          color $color-ball-red
      .box-top 
        .context 
          background $color-ball-red

</style>